<template>
  <div>
    <div class="table-operator">
      <a-button style="margin-bottom: 5px;" type="primary" icon="plus" @click="handleAddExtendsField">添加策略</a-button>
      <span style="font-size:12px;color: red;">如自行配置策略后将不再执行本栏目的系统内置策略</span>
    </div>

    <a-table
      bordered
      :pagination="false"
      ref="table"
      rowKey="id"
      :columns="columns"
      size="small"
      :dataSource="dataSource">
      <template v-for="col in extendsField" :slot="col.name" slot-scope="text, record, index">
        <a-form-item :key="col.name" style="padding:0;margin:0">
          <a-input-number
            v-if="col.type === 'number' "
            :min="0"
            v-decorator="[
              `${col.name}-${index}`,
              {rules: [{ required: col.required, message: col.title+'不能为空' }],
               initialValue:text, validateTrigger: 'change'}
            ]"
            @change="e => handleChange(e, record.id, col.name, index,col.type)" />
          <a-input
            v-if="col.type === 'text' "
            :min="0"
            v-decorator="[
              `${col.name}-${index}`,
              {rules: [{ required: col.required, message: col.title+'不能为空' }],
               initialValue:text, validateTrigger: 'change'}
            ]"
            @change="e => handleChange(e, record.id, col.name, index,col.type)" />

          <a-radio
            v-if="col.type === 'radio' "
            v-decorator="[
              `${col.name}-${index}`,
              {rules: [{ required: col.required, message: col.title+'不能为空' }],
               initialValue:text, validateTrigger: 'change'}
            ]"
            @change="e => handleChange(e, record.id, col.name, index,col.type)"></a-radio>

          <a-checkbox
            v-if="col.type === 'checkbox' "
            :checked="text"
            v-decorator="[
              `${col.name}-${index}`,
              {rules: [{ required: col.required, message: col.title+'不能为空' }],
               initialValue:text, validateTrigger: 'change'}
            ]"
            @change="e => handleChange(e, record.id, col.name, index,col.type)"></a-checkbox>

          <a-textarea
            v-if="col.type === 'textarea' "
            :rows="1"
            v-decorator="[
              `${col.name}-${index}`,
              {rules: [{ required: col.required, message: col.title+'不能为空' }],
               initialValue:text, validateTrigger: 'change'}
            ]"
            @change="e => handleChange(e, record.id, col.name, index,col.type)"></a-textarea>

          <a-select
            v-if="col.type === 'select'"
            :options="selectType[col.name]"
            v-decorator="[
              `${col.name}-${index}`,
              {rules: [{ required: true, message: col.title+'不能为空' }],
               initialValue:text,validateTrigger: 'change'}
            ]"
            @change="e => handleChange(e, record.id, col.name, index,col.type)"></a-select>
        </a-form-item>
      </template>
      <span slot="action" slot-scope="text, record, index">
        <template>
          <a-popconfirm title="确定要删除该明细吗？" @confirm="handleDeleteExtendsField(record, index)" okText="确认" cancelText="取消">
            <a-tag color="red">删除</a-tag>
          </a-popconfirm>
        </template>
      </span>
    </a-table>
  </div>
</template>

<script>
  export default {
    components: {},
    data () {
      return {
        moptions: [],
        fields: [],
        categoryId: '',
        checkDefaultFields: [],
        dataSource: [],
        selectType: {
          actionCode: [{
              value: 'CREATE_CONTENT',
              label: '创建文章内容'
            },
            {
              value: 'UPDATE_CONTENT',
              label: '修改文章内容'
            },
            {
              value: 'DELETE_CONTENT',
              label: '删除文章内容'
            },
            {
              value: 'PUBLISH_CONTENT',
              label: '发布文章内容'
            },
            {
              value: 'TOP_CONTENT',
              label: '置顶文章内容'
            },
            {
             value: 'BATCH_MOVE',
             label: '批量移动文章内容'
            },
            {
              value: 'UPDATE_CATEGORY',
              label: '修改栏目分类'
            },
            {
              value: 'DELETE_CATEGORY',
              label: '删除栏目分类'
            },
            {
              value: 'GENERATE_CATEGORY',
              label: '栏目分类静态化'
            }
          ],
          actuatorCode: [
            {
              value: 'CONTENT_DETAIL_ACTUATOR',
              label: '生成内容详情页'
            },
            {
              value: 'NEXT_CONTENT_DETAIL_ACTUATOR',
              label: '生成下一篇内容详情页'
            },
            {
              value: 'PREVIOUS_CONTENT_DETAIL_ACTUATOR',
              label: '生成上一篇内容详情页'
            },
            {
              value: 'INDEX_ACTUATOR',
              label: '生成首页模板'
            },
            {
              value: 'CATEGORY_ACTUATOR',
              label: '生成栏目模板首页'
            },
            {
              value: 'CATEGORY_PAGE_ACTUATOR',
              label: '生成栏目模板分页列表'
            },
            {
              value: 'SOLR_STORE',
              label: '同步内容到SOLR库'
            },
            {
              value: 'SOLR_DEL',
              label: '从SOLR库删除内容'
            }
          ],
          triggerTime: [ {
              value: 'now',
              label: '立刻执行'
            },
            {
              value: '389dd',
              label: '凌晨1点执行'
            },
            {
              value: 'ewew',
              label: '1小时候执行'
            }]
        },
        form: this.$form.createForm(this),
        extendsField: [
          {
            name: 'actionCode',
            type: 'select',
            title: '动作名称',
            required: true
          },
          {
            name: 'actuatorCode',
            type: 'select',
            title: '策略执行器',
            required: true
          },
          {
            name: 'triggerTime',
            type: 'select',
            title: '执行时间',
            required: true
          },
          {
            name: 'orderNum',
            type: 'number',
            title: '排序',
            required: false
          },
          {
            name: 'isStart',
            type: 'checkbox',
            title: '是否启用',
            required: false
          }
        ],
        // 表头
        columns: [
          {
            title: '动作名称',
            dataIndex: 'actionCode',
            align: 'center',
            width: '150px',
            scopedSlots: {
              customRender: 'actionCode'
            }
          },
          {
            title: '策略执行器',
            dataIndex: 'actuatorCode',
            align: 'center',
            width: '150px',
            scopedSlots: {
              customRender: 'actuatorCode'
            }
          },
          {
            title: '执行时间',
            dataIndex: 'triggerTime',
            align: 'center',
            width: '120px',
            scopedSlots: {
              customRender: 'triggerTime'
            }
          },
          {
            title: '排序',
            dataIndex: 'orderNum',
            align: 'center',
            width: '100px',
            scopedSlots: {
              customRender: 'orderNum'
            }
          },
          {
            title: '是否启用',
            dataIndex: 'isStart',
            align: 'center',
            width: '100px',
            scopedSlots: {
              customRender: 'isStart'
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            width: '80px',
            scopedSlots: {
              customRender: 'action'
            }
          }
        ]
      }
    },
    created () {},
    mounted () {
    },
    methods: {
      handleAddExtendsField () {
        const newData = {
          actionCode: 'CREATE_CONTENT',
          actuatorCode: 'CONTENT_DETAIL_ACTUATOR',
          triggerTime: 'now',
          isStart: true,
          id: Date.now(),
          categoryId: this.categoryId,
          orderNum: 0
        }
        this.dataSource = [...this.dataSource, newData]
      },
      handleDeleteExtendsField (record, index) {
        this.dataSource.splice(index, 1)
      },
      setDataSource (data) {
        this.dataSource = data
      },
      getDataSource () {
        return this.dataSource
      },
      clearDataSource () {
        this.dataSource = []
      },
      setCategoryId (categoryId) {
         this.categoryId = categoryId
      },
      handleChange (e, key, column, index, inputType) {
        const newData = [...this.dataSource]
        const target = newData.filter(item => key === item.id)[0]
        if (target) {
          if (inputType === 'checkbox') {
            target[column] = e.target.checked
          } else {
            target[column] = e instanceof Object ? e.target.value : e
          }
          target.fieldAliase = target.fieldName
        }
      }
    }
  }
</script>
